<template>

<div style="margin-top: 80px">
  <el-form ref="updateForm" :model="updateForm" autocomplete="on" label-width="500px"   :rules="updateRules">
    <el-form-item label="用户名" prop="username">
      <el-input style="width: 300px"
                :disabled="true"
                v-model="updateForm.username"
                placeholder="用户名"

      ></el-input>
    </el-form-item>
    <el-form-item label="新密码" prop="password">
      <el-input v-model="updateForm.password" style="width: 300px"
                placeholder="新密码"
      ></el-input>
    </el-form-item>

    </el-form-item>


    <el-form-item>
      <el-button type="primary" @click.native.passive="onSubmit()" style="margin-left: 90px">立即修改</el-button>
      <!--<el-button @click="updateAccount=false">取消</el-button>-->
    </el-form-item>
  </el-form>

</div>

</template>
<script>
  import { validUsername } from '@/utils/validate'
  import {getCurrentUserNo} from '@/utils/auth'

  import {changeUser} from '@/api/user'
  export default {
    data() {

      const validateUsername = (rule, value, callback) => {
        if ((value).length < 3) {
          callback(new Error('用户名至少为3个字符'))
        } else {
          callback()
        }
      }
      const validatePassword = (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error('密码不能少于6位'))
        } else {
          callback()
        }
      }

      return {
        updateForm: {
          username: getCurrentUserNo(),
          password: '',
          secondPass: ''
        },
        updateAccount: false,
        updateRules: {
          username: [{ required: true, trigger: 'blur', validator: validateUsername }],
          password: [{ required: true, trigger: 'blur', validator: validatePassword }]
        },
      }
    },
    methods: {
      onSubmit() {
        this.$refs.updateForm.validate((valid) => {
          if (valid) {
            changeUser(this.updateForm).then(res => {
              if (res.code === 20000) {
                this.$message({type: 'success', message: '修改密码成功!'})

               this.updateAccount = false
              } else {
                this.$message({type: 'danger', message: '修改密码失败'})
                this.updateAccount = false
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }

    }
  }
</script>
